<template>
  <div class="rollContainer">
    <div class="edit" :style="{'height':height+'px'}">
      <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
        <FormItem label="标题" prop="title">
          <Input v-model.trim="formValidate.title" placeholder="Enter your name"></Input>
        </FormItem>
        <FormItem label="副标题" prop="subTitle">
          <Input v-model.trim="formValidate.subTitle" placeholder="Enter your e-mail"></Input>
        </FormItem>
        <FormItem label prop="desc">
          <wangEditor v-model="formValidate.reward_prompt" :id="goodsId" @change="editorChange"></wangEditor>
        </FormItem>
        <FormItem>
          <Button type="primary" @click="handleSubmit('formValidate')">发布</Button>
          <Button @click="handleReset('formValidate')" style="margin-left: 8px">返回</Button>
        </FormItem>
      </Form>
    </div>
  </div>
</template>

<script>
import wangEditor from "@/components/wangEditor.vue";
export default {
  components: {
    wangEditor
  },
  data() {
    return {
      goodsId: "asdas",
      height: 100,
      formValidate: {
        title: "",
        subTitle: "",
        reward_prompt: ""
      },
      ruleValidate: {
        title: [
          {
            required: true,
            message: "The name cannot be empty",
            trigger: "blur"
          }
        ],
        subTitle: [
          {
            required: true,
            message: "Mailbox cannot be empty",
            trigger: "blur"
          },
        ]
      }
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.height = window.innerHeight - 180;
    });
  },
  methods: {
    editorChange(e) {}
  }
};
</script>

<style lang="scss" scoped>
</style>